<template>
	<view class="container">
		<view class="top-box" :style="'background:' + mobile_head_color">
			<view class="address-box">
				<view class="address-icon">
					<image src="../../../static/images/address.png" class="address-img"></image>
				</view>
				<view class="address-text" v-if="true">新塘家园</view>
			</view>
		</view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="jiaofei" :active-color="actcolor"></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<view class="search-box" v-if="user_type == 1">
					<input type="text" class="ipt-box" value="" placeholder-class="placeholder-text" placeholder="请输入手机号或者快递单号" />
				</view>
				<scroll-view scroll-y="true" class="page_scroll1" :class="user_type == 1? 'page_scroll':'' ">
					<view class="card" v-if="listdata && listdata[0]" v-for="(item,index) in listdata" :key="index">
						<view class="card-top">
							<view class="top-title">快递单号：{{item.express_no}}</view>
							<view class="top-tips" v-if="item.status == 0">{{item.desc}}</view>
							<view class="top-tips-old" v-if="item.status == 1">{{item.desc}}</view>
							<!-- <view class="top-tips-old" v-if="item.status == 2">{{item.desc}}</view> -->
						</view>
						<view class="card-center">
							<view class="center-title">{{item.express_name}}</view>
							<view class="center-number">{{item.fetch_code}}</view>
						</view>
						<view class="card-bottom">
							<view class="bottom-text">
								<view class="text">姓名：{{item.name}}</view>
								<!-- <view class="tips" v-if="item.paid == null">未支付</view>
								<view class="tips" v-if="item.paid == 0">{{item.paidDesc}}</view>
								<view class="tips-old" v-if="item.paid == 1">{{item.paidDesc}}</view> -->
							</view>
							<view class="text">手机号：{{item.phone}}</view>
							<view class="text">存放时间：{{item.store_time}}</view>
							<!-- <view class="text" v-if="item.memo">备 注：{{item.memo}}</view>
							<view class="text" v-if="!item.memo">备 注：无</view> -->
						</view>
						<view class="btn-box">
							<!-- <button type="primary" class="btn-left" :style="'background-color:' + actcolor + ';-webkit-box-shadow:0rpx 4rpx 16rpx #b1b1b1;box-shadow:0rpx 4rpx 16rpx #b1b1b1;'" @tap="expresstime(item.id,item.money,item.price)">{{item.expressDesc}}</button> -->
							<button type="primary" class="btn-right" :style="'background-color:' + actcolor + ';-webkit-box-shadow:0rpx 4rpx 16rpx #b1b1b1;box-shadow:0rpx 4rpx 16rpx #b1b1b1;'"
							 @tap="openPopup1(item.id)">取件</button>
						</view>
					</view>
					<div class='tip_box_no_data' v-if="!listdata[0]">
						<image class="no_data_img" src="https://hf.pigcms.com/static/images/house/no_data.png"></image>
						<div class='no_tip_content'>
							<lang keywords="列表是空的~"></lang>
						</div>
					</div>
				</scroll-view>
			</view>
			<view v-show="current === 1">
				<view class="search-box" v-if="user_type == 1">
					<input type="text" class="ipt-box" value="" placeholder-class="placeholder-text" placeholder="请输入手机号或者快递单号" />
				</view>
				<scroll-view scroll-y="true" class="page_scroll1" :class="user_type == 1? 'page_scroll':'' ">
					<view class="card" v-if="listnum && listnum[0]" v-for="(item,index) in listnum">
						<view class="card-top">
							<view class="top-title">{{item.expressDesc}}</view>
							<view class="top-text">提交时间：{{item.add_time}}</view>
						</view>
						<view class="card-bottom card-bottom1">
							<view class="bottom-text">
								<view class="text text1">{{item.send_uname}}&nbsp;{{item.send_phone}}</view>
								<view class="bottom-tips">寄</view>
							</view>
							<view class="text text2">{{item.send_adress}}</view>
						</view>
						<view class="card-bottom card-bottom1">
							<view class="bottom-text">
								<view class="text text1">{{item.collect_uname}}&nbsp;{{item.collect_phone}}</view>
								<view class="bottom-tips bottom-tips1">收</view>
							</view>
							<view class="text text2">{{item.collect_adress}}</view>
						</view>
						<view class="card-center">
							<view class="text text2">物品重量：{{item.weightDesc}}</view>
							<view class="text text3">代发费用：￥{{item.send_price}}</view>
						</view>
						<view class="text text3">备 注：{{item.remarks}}</view>
					</view>
					<div class='tip_box_no_data' v-if="!listnum[0]">
						<image class="no_data_img" src="https://hf.pigcms.com/static/images/house/no_data.png"></image>
						<div class='no_tip_content'>
							<lang keywords="列表是空的~"></lang>
						</div>
					</div>
				</scroll-view>
			</view>
		</view>
		<view class="btn-express" :style="'background:' + mobile_head_color" v-if="user_type == 1" v-show="current === 0"
		 @tap="goindependent">
			存快递
		</view>
		<view class="independent_payment" v-if="!user_type == 1" v-show="current === 0" @tap="gohelppickup">
			<image src="../../../static/images/helppickup.png" class="independent-img"></image>
		</view>
		<view>
			<uni-popup ref="popup" type="center" class="villageHousePopup">
				<view class="popup-box">
					<view class="popup-box1">
						<view class="title">请输入取件码</view>
						<view class="guanbi-icon" @tap="closePopup">
							<image src="../../../static/images/guanbi.png" class="guanbi-img" mode=""></image>
						</view>
					</view>
					<input type="text" value="" v-model="pickup_code" class="input-box"/>
					<button type="primary" class="btn" @tap="confirmPickup">确定</button>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from "../../../appComponent/uni/uni-segmented-control/uni-segmented-control.vue"
	import uniPopup from '../../../appComponent/uni/uni-popup/uni-popup.vue';
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	// 快递代收列表
	const getexpressCollection = () => {
		common.post('HouseApi&a=express_num_list', {
			type: 1
		}, data => {
			console.log('++++', data)
			_this.listdata = data.dataList;
			_this.user_type = data.user_type;
		});
	};
	// 快递代收列表
	const getexpressDelivery = () => {
		common.post('HouseApi&a=express_num_list', {
			type: 2
		}, data => {
			console.log('++++', data)
			_this.listnum = data.dataList;
			_this.user_type = data.user_type;
		});
	};
	// 快递确认取件
	const getconfirmPickup = () => {
		common.post('HouseApi&a=express_num_edit', {
			pickup_code: _this.pickup_code,
			pigcms_id: _this.pigcms_id,
			id: _this.id,
		}, data => {
			console.log('++++', data);
			settime()
		});
	};
	//轮训获取开门信息
	const getopenDoor = () => {
		common.post('HouseApi&a=get_train_express', {
			village_id: _this.village_id,
			equipment_id: _this.equipment_id,
			id: _this.id,
		}, data => {
			_this.type = data.type;
			if (_this.type == 1) {
				uni.showModal({
					title: common.changeTxt('提示'),
					content: common.changeTxt('门已开'),
					showCancel: false,
					confirmText: common.changeTxt('确定'),
					success: function(res) {
						if (res.confirm) {}
					}
				});
			}
		});
	};
	const settime = () =>{
		setInterval(function() {
			getopenDoor()
		}, 1000)
	}
	export default {
		data() {
			return {
				items: [],
				current: 0,
				listdata: {},
				listnum: {},
				user_type: '',
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				id: 0,
				btncolor: '',
				mobile_head_color: '#06c1ae',
				pickup_code:'',
				equipment_id:'',
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		onLoad(options) {
			_this = this;
			_this.equipment_id = options.equipment_id
			_this.items = ["待取快递", "已取快递"];
			console.log("current", options.current)
			if (options.current == 1) {
				_this.current = 1
			} else {
				_this.current = 0
			}

			// #ifdef H5
			console.log('准备跳小程序页', _this);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.mobile_head_color = config.config.mobile_head_color;
				_this.actcolor = config.config.mobile_head_color

				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
				};
				getexpressCollection();
				getexpressDelivery();
			});
		},
		methods: {
			// 预约上门取件
			expresstime(id, money, price) {
				console.log("price", price)
				uni.navigateTo({
					url: '/pages/village/smartExpressCabinet/expressAppointment?id=' + id + "&money=" + money + '&price=' + price
				})
			},
			onClickItem(index) {
				if (_this.current !== index) {
					_this.current = index;

				}
			},
			// 去寄快递
			goexpressDelivery() {
				uni.navigateTo({
					url: '/pages/village/smartExpressCabinet/expressDelivery'
				})
			},
			//用户和快递员确认取件
			openPopup1(id){
				_this.id = id
				_this.openPopup();
			},
			// 确认取件
			confirmPickup() {
				getconfirmPickup()
			},
			// 快递员存快递
			goindependent() {
				uni.navigateTo({
					url: '/pages/village/smartExpressCabinet/courierDepositExpress?equipment_id=' + _this.equipment_id
				})
			},
			//用户帮人取件
			gohelppickup(){
				_this.openPopup();
			},
			openPopup() {
				this.$refs.popup.open();
			},
			closePopup() {
				this.$refs.popup.close();
			},
		},
		components: {
			uniSegmentedControl,
			uniPopup
		}
	}
</script>

<style>
	page {
		background: rgb(245, 245, 245);
	}

	.container {
		margin: 0;
		padding: 0;
	}

	.top-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.address-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.address-icon {
		width: 25rpx;
		height: 30rpx;
		margin-right: 8rpx;
	}

	.address-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.address-text {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0px;
		color: #ffffff;
	}

	.card {
		margin: 30rpx;
		padding: 0rpx 30rpx 30rpx 30rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
	}

	.card-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.card-center {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 15rpx;
	}

	.center-title {
		font-size: 32rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #000000;
	}

	.center-number {
		font-size: 32rpx;
		font-weight: 600;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #2681f3;
	}

	.top-title {
		font-size: 24rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 80rpx;
		letter-spacing: 0rpx;
		color: #333333;
	}

	.top-tips {
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		padding: 5rpx 10rpx;
		letter-spacing: 0rpx;
		color: #ffa112;
		background-color: #f9efd2;
		border-radius: 5rpx;
	}

	.top-tips-old {
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		padding: 5rpx 10rpx;
		letter-spacing: 0rpx;
		color: #2fd07b;
		background-color: #dbf8e9;
		border-radius: 5rpx;
	}

	.card-bottom {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.bottom-text {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.text {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 50rpx;
		letter-spacing: 0rpx;
		color: #999999;
	}

	.tips {
		font-size: 18rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #ffffff;
		background-color: #ffa112;
		border-radius: 4rpx;
		margin-left: 15rpx;
		padding: 0rpx 10rpx;
	}

	.tips-old {
		font-size: 18rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #ffffff;
		background-color: #2fd07b;
		border-radius: 4rpx;
		margin-left: 15rpx;
		padding: 0rpx 10rpx;
	}

	.btn-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.btn-left {
		background-color: #2681f3;
		border-radius: 35rpx;
		border: 0;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 50rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
		margin: 0rpx;
		padding: 0 15rpx;
	}

	.btn-right {
		background-color: #2681f3;
		border-radius: 28rpx;
		border: 0;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 50rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
		margin: 0rpx;
		margin-left: 15rpx;
		padding: 0 15rpx;
	}

	.independent_payment {
		position: fixed;
		bottom: 165rpx;
		right: 24rpx;
		width: 102rpx;
		height: 102rpx;
	}

	.btn-express {
		position: fixed;
		bottom: 165rpx;
		right: 24rpx;
		width: 102rpx;
		height: 102rpx;
		border-radius: 102rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 102rpx;
	}

	.independent-img {
		width: 100%;
		height: 100%;
	}

	/* 右侧内容页 */
	.top-text {
		font-size: 22rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #999999;
	}

	.bottom-tips {
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;
		background-color: #2681f3;
		border-radius: 18rpx;
		line-height: 30rpx;
		text-align: center;
		font-size: 18rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #ffffff;
	}

	.bottom-tips1 {
		background-color: #ffa112;
	}

	.card-bottom1 {
		border-bottom: 2rpx solid rgba(229, 229, 229, 0.7);
		padding: 20rpx 0;
	}

	.text1 {
		font-weight: 700;
		color: #333333;
		line-height: 40rpx;
	}

	.text2 {
		line-height: 40rpx;
		color: #666666;
	}

	.text3 {
		line-height: 50rpx;
		color: #666666;
	}

	/* 弹层 */
	.tip_box_no_data {
		padding-top: calc((100vh - 170rpx - 288rpx - 21rpx)/2);
		font-size: 28rpx;
		text-align: center;
	}

	.tip_box_no_data .tip_title {
		width: 100%;
		text-align: center;
	}

	.search-box {
		margin: 30rpx 30rpx 0rpx 30rpx;
		border: 2rpx solid #CCCCCC;
		border-radius: 20rpx;
	}

	.ipt-box {
		margin: 20rpx 0rpx;
		padding-left: 20rpx;
	}

	.placeholder-text {
		text-align: center;
		padding: 20rpx 0rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.placeholder-text:before {
		content: '';
		width: 32rpx;
		height: 32rpx;
		display: block;
		background-image: url(../../../static/images/search.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.page_scroll1 {
		height: calc(100vh - 80rpx - 60rpx);
	}

	.page_scroll {
		height: calc(100vh - 80rpx - 60rpx - 115rpx);
	}

	.no_data_img {
		width: 374rpx;
		height: 288rpx;
	}
	.popup-box{
		width: 500rpx;
		height: 400rpx;
	}
	.popup-box1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
	.title {
		font-size: 32rpx;
		font-weight: 700;
		width: 100%;
		text-align: center;
		transform: translateX(15rpx);
	}
	.guanbi-icon {
		width: 30rpx;
		height: 30rpx;
	}
	.guanbi-img {
		width: 100%;
		height: 100%;
	}
	.input-box {
		text-align: center;
		margin-top: 120rpx;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #000000;
	}
	.btn {
		width: 200rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		margin-top: 90rpx;
	}
</style>
